<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>SEnginx Statistics</title>

    <style type="text/css">
    body {
        background:  white;
        color:       black;
        font-family: Helvetica, Arial, sans-serif;
    }

    h1 {
        margin: .5em 0 0 0;
    }

    h2 {
        margin: .8em 0 .3em 0;
    }

    h3 {
        margin: .5em 0 .3em 0;
    }

    table {
        font-size: .8em;
        margin: .5em 0;
        border-collapse: collapse;
        border-bottom: 1px #DED solid;
    }

    table.plain {
        border: none;
    }

    thead th {
        font-size: 1em;
        background: #00a0ff;
        padding: .1em .3em;
        border: .2em solid #FFF;
        color:   white;
    }

    tbody tr.odd {
        background: #F5F5F5;
    }

    tbody th {
        text-align: left;
    }

    tbody td {
        height: 1.2em;
        text-align: right;
    }

    #upstreams table {
        width: 100%;
    }

    #upstreams tbody th {
        font-weight: normal;
    }

    </style>

    <script type="text/javascript"><%= IO.read("jquery-1.10.2.min.js") %></script>
    <script type="text/javascript">
function formatSizeUnits(bytes){
    var k = 1024;
    if      (bytes>=Math.pow(k,3))    {bytes=(bytes/Math.pow(k,3)).toFixed(2)+' GB';}
    else if (bytes>=Math.pow(k,2))    {bytes=(bytes/Math.pow(k,2)).toFixed(2)+' MB';}
    else if (bytes>=k)                {bytes=(bytes/k).toFixed(2)+' KB';}
    else if (bytes>1)                 {bytes=bytes.toFixed(2)+' B';}
    else if (bytes>0)                 {bytes=bytes.toFixed(2)+' B';}
    else                              {bytes='0 B';}
    return bytes;
}
var prevResult = null;
function refreshMonitor() {
    $.ajax({
        type: "GET",
        dataType: "json",
        url: "/stats",
        complete: function() {
            setTimeout(refreshMonitor, 1000);
        },
        error: function() {
            prevResult = null;
        },
        success: function(result) {
            var secElapsed = (prevResult == null) ? 0 : (result.timestamp - prevResult.timestamp)/1000;
            var servers = result.servers;
            var tbl_traffic = $("<table></table>");
            var head_traffic = $("<thead>"
              +"<tr><th></th><th colspan='3'>Request</th><th colspan='5'>Response</th><th colspan='4'>Traffic</th></tr><tr>"
              +"<th>Server</th><th>Current Request</th><th>Total Request</th><th>Req/s</th><th>2xx</th><th>3xx</th><th>4xx</th><th>5xx</th><th>Total Response</th><th>Sent</th><th>Recvd</th><th>Sent/s</th><th>Recvd/s</th></tr>"
              +"</thead>");
            var body_traffic = $("<tbody></tbody>");
            for (var i = 0; i < servers.length; ++i) {
                var row = $("<tr></tr>");
                var cur_traffic = servers[i].traffic;
                row.append($("<td></td>").text(servers[i].name));
                row.append($("<td></td>").text(cur_traffic.cur_req));
                row.append($("<td></td>").text(cur_traffic.req));
                var reqPerSec = (prevResult == null ? NaN : (cur_traffic.req - prevResult.servers[i].traffic.req) / secElapsed);
                row.append($("<td></td>").text(reqPerSec >= 0 ? reqPerSec.toFixed(2) : NaN));
                row.append($("<td></td>").text(cur_traffic.res_2xx));
                row.append($("<td></td>").text(cur_traffic.res_3xx));
                row.append($("<td></td>").text(cur_traffic.res_4xx));
                row.append($("<td></td>").text(cur_traffic.res_5xx));
                row.append($("<td></td>").text(cur_traffic.res_2xx + cur_traffic.res_3xx + cur_traffic.res_4xx + cur_traffic.res_5xx));
                row.append($("<td></td>").text(formatSizeUnits(cur_traffic.sent)));
                row.append($("<td></td>").text(formatSizeUnits(cur_traffic.recvd)));
                var sentPerSec = (prevResult == null ? NaN : (cur_traffic.sent - prevResult.servers[i].traffic.sent) / secElapsed);
                row.append($("<td></td>").text(sentPerSec >= 0 ? formatSizeUnits(sentPerSec) : NaN));
                var recvdPerSec = (prevResult == null ? NaN : (cur_traffic.recvd - prevResult.servers[i].traffic.recvd) / secElapsed);
                row.append($("<td></td>").text(recvdPerSec >= 0 ? formatSizeUnits(recvdPerSec) : NaN));
                if (i % 2 == 1) {
                  row.addClass("odd");
                }
                body_traffic.append(row);
            }
            tbl_traffic.append(head_traffic);
            tbl_traffic.append(body_traffic);

            var tbl_attack = $("<table></table>");
            var head_attack = $("<thead><tr><th>Server</th><th>Sql Injection</th><th>Cross Site Scripting</th><th>Remote File Inclusion</th><th>Directory Traversal</th><th>Evading Tricks</th><th>File Upload</th><th>Cookie Poisoning</th><th>Web Defacement</th><th>Robot Mitigation Challenges</th><th>Other Threats</th></tr></thead>");
            var body_attack = $("<tbody></tbody>");
            for (var i = 0; i < servers.length; ++i) {
                var row = $("<tr></tr>");
                var cur_attack = servers[i].attack;
                row.append($("<td></td>").text(servers[i].name));
                row.append($("<td></td>").text(cur_attack.sql));
                row.append($("<td></td>").text(cur_attack.xss));
                row.append($("<td></td>").text(cur_attack.rfi));
                row.append($("<td></td>").text(cur_attack.dt));
                row.append($("<td></td>").text(cur_attack.evade));
                row.append($("<td></td>").text(cur_attack.fu));
                row.append($("<td></td>").text(cur_attack.cp));
                row.append($("<td></td>").text(cur_attack.wd));
                row.append($("<td></td>").text(cur_attack.rm));
                row.append($("<td></td>").text(cur_attack.other));
                if (i % 2 == 1) {
                  row.addClass("odd");
                }
                body_attack.append(row);
            }
            tbl_attack.append(head_attack);
            tbl_attack.append(body_attack);

            $("#monitor").empty().append("<br><h2>Traffic Monitor</h2>").append(tbl_traffic).append("<br><br><h2>Attack Monitor</h2>").append(tbl_attack);
            prevResult = result;
        }
    });
}
$(refreshMonitor);
    </script>

</head>
<body>
    <h1>
        <img src="./senginx_logo.png" />
    </h1>

    <div id="monitor"></div>
</body>
</html>
